<template>
	<cl-page>
		<view class="page">
			<view class="form">
				<cl-form label-position="top" v-model="formData" :rules="rules">
					<cl-form-item label="货主名称">
						<template #label><span class="required-icon">*</span>货主名称</template>
						<cl-input v-model="formData.owner_name" :border="false" :height="80" :border-radius="12"
							placeholder="请填写昵称" />
					</cl-form-item>
				</cl-form>
			</view>

			<cl-footer>
				<cl-button custom type="primary" :loading="loading" @tap="submit">
					生成标识码
				</cl-button>
			</cl-footer>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import { useUi } from "/$/cool-ui";


	const ui = useUi();

	const loading = ref(false);

	const formData = reactive({
		owner_name: "",
	});

	const Form = ref<ClForm.Ref>();

	function submit() {
		Form.value?.validate((valid, errors) => {
			if (valid) {
				setTimeout(() => {
					ui.showToast("提交成功");
					loading.value = false;
				}, 1500);
			}
		});
	}

	const rules = reactive({
		owner_name: {
			required: true,
			message: "货主名称不能为空",
		},
	});
</script>

<style lang="scss" scoped>
	.page {
		.form {
			padding: 20rpx 24rpx;
		}
	}
</style>